<!--
 * @Description: //TODO
 * @Author: iamsmiling
 * @Date: 2021-07-08 20:53:54
 * @LastEditTime: 2021-07-12 09:12:13
-->
<template>
  <div class="errorLog-container">
    <el-divider content-position="left"> 日志管理 </el-divider>
    <div class="table-container">
      <vab-query-form>
        <vab-query-form-left-panel>
          <el-button icon="el-icon-delete" type="danger" @click="handleDelete">
            批量删除
          </el-button>
          <!-- <el-button type="primary" @click="testMessage">baseMessage</el-button>
          <el-button type="primary" @click="testALert">baseAlert</el-button>
          <el-button type="primary" @click="testConfirm">baseConfirm</el-button>
          <el-button type="primary" @click="testNotify">baseNotify</el-button> -->
        </vab-query-form-left-panel>
        <!-- <vab-query-form-right-panel>
          <el-form
            ref="form"
            :model="queryForm"
            :inline="true"
            @submit.native.prevent
          >
            <el-form-item>
              <el-input v-model="queryForm.title" placeholder="标题" />
            </el-form-item>
            <el-form-item>
              <el-button
                icon="el-icon-search"
                type="primary"
                native-type="submit"
                @click="handleQuery"
              >
                查询
              </el-button>
            </el-form-item>
          </el-form>
        </vab-query-form-right-panel> -->
      </vab-query-form>

      <el-table
        ref="tableSort"
        v-loading="listLoading"
        :data="list"
        :element-loading-text="elementLoadingText"
        :height="height"
        @selection-change="setSelectRows"
        @sort-change="tableSortChange"
      >
        <el-table-column
          show-overflow-tooltip
          type="selection"
          label="错误信息"
          prop="content"
        ></el-table-column>
        <el-table-column show-overflow-tooltip label="错误详情" prop="content">
        </el-table-column>
        <!-- <el-table-column show-overflow-tooltip label="头像">
          <template #default="{ row }">
            <el-image
              v-if="imgShow"
              :preview-src-list="imageList"
              :src="row.img"
            ></el-image>
          </template>
        </el-table-column> -->
        <!-- <el-table-column
          show-overflow-tooltip
          label="点击量"
          prop="pageViews"
          sortable
        ></el-table-column> -->
        <!-- <el-table-column
          label="状态"
          :filters="[
            { text: '未处理', value: '未处理' },
            { text: '处理中', value: '处理中' },
            { text: '已处理', value: '已处理' },
          ]"
          :filter-method="filterTag"
          filter-placement="bottom-end"
        >
          <template #default="{ row }">
            <el-tooltip
              :content="row.status"
              class="item"
              effect="dark"
              placement="top-start"
              width="90"
            >
              <el-tag :type="row.status | statusFilter">
                {{ row.status }}
              </el-tag>
            </el-tooltip>
          </template>
        </el-table-column> -->
        <el-table-column
          show-overflow-tooltip
          sortable
          label="时间"
          prop="createdAt"
          width="200"
        ></el-table-column>
        <el-table-column show-overflow-tooltip label="操作" width="180px">
          <template #default="{ row }">
            <el-button type="text" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :background="background"
        :current-page="queryForm.page"
        :layout="layout"
        :page-size="queryForm.page_size"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      ></el-pagination>
      <table-edit ref="edit"></table-edit>
    </div>
  </div>
</template>
<script>
// import ErrorTest from "./components/ErrorTest";
import { getList, doDelete } from "@/chimera_api/chimera_log";
import TableEdit from "../table/components/TableEdit";
export default {
  name: "ErrorLog",
  // components: { ErrorTest },
  components: {
    TableEdit,
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      imgShow: true,
      list: [],
      imageList: [],
      listLoading: true,
      layout: "total, sizes, prev, pager, next, jumper",
      total: 0,
      background: true,
      selectRows: "",
      elementLoadingText: "正在加载...",
      queryForm: {
        page: 1,
        page_size: 10,
        title: "",
      },
    };
  },
  computed: {
    height() {
      return this.$baseTableHeight();
    },
  },
  created() {
    this.fetchData();
  },
  beforeDestroy() {},
  mounted() {},
  methods: {
    setSelectRows(val) {
      this.selectRows = val;
    },
    handleAdd() {
      this.$refs["edit"].showEdit();
    },
    handleEdit(row) {
      this.$refs["edit"].showEdit(row);
    },
    handleDelete(row) {
      if (row.id) {
        this.$baseConfirm("你确定要删除当前项吗", null, async () => {
          const { msg } = await doDelete({ id: [row.id] });
          this.$baseMessage(msg, "success");
          this.fetchData();
        });
      } else {
        if (this.selectRows.length > 0) {
          const ids = this.selectRows.map((item) => item.id);
          this.$baseConfirm("你确定要删除选中项吗", null, async () => {
            const { msg } = await doDelete({ id: ids });
            this.$baseMessage(msg, "success");
            this.fetchData();
          });
        } else {
          this.$baseMessage("未选中任何行", "error");
          return false;
        }
      }
    },
    handleSizeChange(val) {
      this.queryForm.page_size = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.queryForm.page = val;
      this.fetchData();
    },
    handleQuery() {
      this.queryForm.page = 1;
      this.fetchData();
    },
    async fetchData() {
      this.listLoading = true;
      const { data } = await getList(this.queryForm);
      this.list = data.list;
      this.total = data.total_count;
      setTimeout(() => {
        this.listLoading = false;
      }, 500);
    },
  },
};
</script>
